{% extends 'base.html' %}
{% load static %}

{% block title %}库存预警仪表板{% endblock %}

{% block extra_css %}
<style>
    .alert-card {
        border-left: 4px solid #dee2e6;
        transition: all 0.3s ease;
    }
    .alert-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .alert-card.urgent {
        border-left-color: #dc3545;
    }
    .alert-card.high {
        border-left-color: #fd7e14;
    }
    .alert-card.medium {
        border-left-color: #ffc107;
    }
    .alert-card.low {
        border-left-color: #28a745;
    }
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .stat-card.danger {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    }
    .stat-card.warning {
        background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
    }
    .stat-card.success {
        background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
    }
    .stat-card.info {
        background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    }
    .progress-ring {
        width: 60px;
        height: 60px;
    }
    .progress-ring-circle {
        stroke-width: 4;
        fill: transparent;
        stroke-dasharray: 157;
        stroke-dashoffset: 157;
        stroke-linecap: round;
        animation: progress 1s ease-in-out forwards;
    }
    @keyframes progress {
        to {
            stroke-dashoffset: calc(157 - (157 * var(--progress)) / 100);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-exclamation-triangle text-warning"></i> 库存预警仪表板</h2>
                <div>
                    <a href="{% url 'assets:inventory_alert_list' %}" class="btn btn-primary">
                        <i class="fas fa-list"></i> 预警列表
                    </a>
                    <a href="{% url 'assets:inventory_status_overview' %}" class="btn btn-info">
                        <i class="fas fa-chart-bar"></i> 库存状态
                    </a>
                    {% if user.is_staff %}
                    <form method="post" action="{% url 'assets:generate_inventory_alerts' %}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-sync"></i> 生成预警
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stat-card danger">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="mb-0">{{ total_active_alerts }}</h3>
                        <p class="mb-0">活跃预警</p>
                    </div>
                    <i class="fas fa-exclamation-circle fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card warning">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="mb-0">{{ urgent_alerts_count }}</h3>
                        <p class="mb-0">紧急预警</p>
                    </div>
                    <i class="fas fa-fire fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card info">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="mb-0">{{ out_of_stock_count }}</h3>
                        <p class="mb-0">缺货预警</p>
                    </div>
                    <i class="fas fa-times-circle fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card success">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="mb-0">{{ low_stock_count }}</h3>
                        <p class="mb-0">低库存预警</p>
                    </div>
                    <i class="fas fa-arrow-down fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 预警类型分布 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-pie text-primary"></i> 预警类型分布
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="mb-3">
                                <div class="text-danger">
                                    <i class="fas fa-times-circle fa-2x"></i>
                                </div>
                                <h4 class="text-danger">{{ out_of_stock_count }}</h4>
                                <small class="text-muted">缺货</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <div class="text-warning">
                                    <i class="fas fa-arrow-down fa-2x"></i>
                                </div>
                                <h4 class="text-warning">{{ low_stock_count }}</h4>
                                <small class="text-muted">低库存</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <div class="text-info">
                                    <i class="fas fa-shopping-cart fa-2x"></i>
                                </div>
                                <h4 class="text-info">{{ reorder_count }}</h4>
                                <small class="text-muted">补货提醒</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <div class="text-primary">
                                    <i class="fas fa-clock fa-2x"></i>
                                </div>
                                <h4 class="text-primary">0</h4>
                                <small class="text-muted">过期预警</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关键耗材状态 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exclamation-triangle text-warning"></i> 关键耗材状态
                    </h5>
                </div>
                <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                    {% if critical_consumables %}
                        {% for consumable in critical_consumables %}
                        <div class="d-flex justify-content-between align-items-center mb-3 p-2 border rounded">
                            <div>
                                <strong>{{ consumable.name }}</strong>
                                <br>
                                <small class="text-muted">{{ consumable.category.name }} - {{ consumable.warehouse.name }}</small>
                            </div>
                            <div class="text-right">
                                <div class="progress" style="width: 100px; height: 8px;">
                                    <div class="progress-bar 
                                        {% if consumable.get_stock_percentage <= 10 %}bg-danger
                                        {% elif consumable.get_stock_percentage <= 25 %}bg-warning
                                        {% else %}bg-info{% endif %}" 
                                        role="progressbar" 
                                        style="width: {{ consumable.get_stock_percentage }}%">
                                    </div>
                                </div>
                                <small class="text-muted">{{ consumable.quantity }}/{{ consumable.max_quantity }}</small>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3"></i>
                            <p>当前没有关键耗材需要关注</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 最新预警 -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-bell text-warning"></i> 最新预警
                    </h5>
                </div>
                <div class="card-body">
                    {% if recent_alerts %}
                        <div class="row">
                            {% for alert in recent_alerts %}
                            <div class="col-md-6 col-lg-4 mb-3">
                                <div class="alert-card card h-100 {{ alert.priority }}">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <h6 class="card-title mb-0">{{ alert.consumable.name }}</h6>
                                            <span class="badge 
                                                {% if alert.priority == 'urgent' %}badge-danger
                                                {% elif alert.priority == 'high' %}badge-warning
                                                {% elif alert.priority == 'medium' %}badge-info
                                                {% else %}badge-secondary{% endif %}">
                                                {{ alert.get_priority_display }}
                                            </span>
                                        </div>
                                        <p class="card-text small text-muted mb-2">
                                            {{ alert.message|truncatechars:50 }}
                                        </p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small class="text-muted">
                                                <i class="fas fa-clock"></i> {{ alert.created_at|date:"m-d H:i" }}
                                            </small>
                                            <a href="{% url 'assets:inventory_alert_detail' alert.pk %}" class="btn btn-sm btn-outline-primary">
                                                查看
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="text-center mt-3">
                            <a href="{% url 'assets:inventory_alert_list' %}" class="btn btn-primary">
                                查看所有预警 <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-check-circle fa-3x mb-3 text-success"></i>
                            <h5>太好了！当前没有活跃的预警</h5>
                            <p>所有库存状态正常</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 动画效果
    $('.stat-card').each(function(index) {
        $(this).delay(index * 100).animate({opacity: 1}, 500);
    });
    
    // 进度条动画
    $('.progress-bar').each(function() {
        var width = $(this).attr('style').match(/width:\s*(\d+)%/);
        if (width) {
            $(this).css('width', '0%').animate({width: width[0]}, 1000);
        }
    });
});
</script>
{% endblock %}
